<template>

    <div id="message" v-show="isShow">
        <div>
        <ul>
            <li v-for="(tr,index) in properties" :key="index">
                {{index}}:{{tr}}
            </li>
        </ul>
        </div>
        <div id="description" v-show="isShow2">           
        </div>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                properties: {},
                movement: undefined,
                isShow: false,
                isShow2:false
            }
        },
        mounted() {


        },
        methods: {
            loadFeaturePicker(viewer) {
                var scene = viewer.scene;
                if (!scene.pickPositionSupported) {
                    window.alert("This browser does not support pickPosition");
                }
                // 阻止浏览器右键默然弹出框
                document.oncontextmenu = function () {
                    return false
                };
                var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
                silhouetteGreen.uniforms.color = Cesium.Color.LIME;
                silhouetteGreen.uniforms.length = 0.01;
                silhouetteGreen.selected = [];
                viewer.scene.postProcessStages.add(
                    Cesium.PostProcessStageLibrary.createSilhouetteStage([silhouetteGreen])
                );
                var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
                //左键点击楼房跳转到bim平台
                handler.setInputAction(movement=>{
                    var feature =scene.pick(movement.position);
                    if(feature&&feature.id&&feature.id.properties&&feature.id.properties['name']=='青岛博士后创新创业园'){
                        this.$router.push("/building")
                    }                    
                },Cesium.ScreenSpaceEventType.LEFT_CLICK)
                //右键点击显示信息
                handler.setInputAction(movement => {
                    this.isShow2 =false;
                     var feature = scene.pick(movement.position);
                    if (!Cesium.defined(feature)) {
                        this.isShow = false
                        return;
                    }
                    this.properties = {};
                    //如果feature属于3dtiles
                    if (feature instanceof Cesium.Cesium3DTileFeature){
                        silhouetteGreen.selected = [feature];
                        var propertyNames = feature.getPropertyNames();
                        var length = propertyNames.length;
                        for (var i = 0; i < length; ++i) {
                            var propertyName = propertyNames[i];
                            this.properties[propertyName] = feature.getProperty(propertyName);
                        }
                    }
                    //如果feature属于Entity 
                    else if (feature.id instanceof Cesium.Entity){
                        var entity = feature.id;
                        if(entity.model==undefined){
                            
                            if(entity.kml==undefined){
                                return;
                            }
                            //如果entity属于kml
                            var description =entity.description.getValue();
                            document.getElementById("description").innerHTML=description
                            console.log(description)
                            this.properties['name']=entity.name; 
                            this.isShow2 =true;                                           
                        }
                        //entity的model不为空，例如gltf
                        else{
                        var propertyNames = entity.properties.propertyNames;
                        for (var i = 0; i < propertyNames.length; ++i) {
                            var propertyName = propertyNames[i];
                            this.properties[propertyName] =entity.properties[propertyName]
                        }
                        }
                    }
                    if (this.properties == undefined) {
                        this.isShow = false;
                        return;
                    }
                    this.movement = movement;
                    this.isShow = true;
                    this.setPosition()
                }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
            },

            setPosition() {
                this.$emit("setPosition", this.movement.position)
            },


        }
    }
</script>
<style scoped>
    #message {
        width: 300px;
        height: 150px;
        color: white;
        padding: 0;
    }
</style>